@use '@angular/material' as mat;

@mixin carousel-color($theme) {
  $config: mat.m2-get-color-config($theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  $light: map-get($background, card);
  $primary-color: mat.m2-get-color-from-palette($primary);
  --swiper-navigation-color: #{$primary-color};
  --swiper-theme-color: #{$primary-color};

  .carousel-1-v2 {
    .actions {
      color: mat.m2-get-color-from-palette($primary);
    }
  }
  .carousel-2-v1 {
    &.section-light {
      color: $light;
      .line-style {
        &:before {
          background: $light;
        }
        .mat-icon {
          background: mat.m2-get-color-from-palette($primary);
          color: $light;
        }
      }
      .swiper-container {
        .swiper-button-next,
        .swiper-button-prev {
          color: $light;
        }
      }
      .testimonial {
        &.style-v2 {
          .bx-wrapper {
            img {
              border-color: $light !important;
            }
          }
          .testimonial-detail {
            .info {
              color: $light;
            }
            .sub-title {
              color: $light;
            }
            .desc {
              color: $light;
            }
          }
        }
      }
    }
  }
  .carousel-2-v2 {
    &.bg-primary {
      background-color: mat.m2-get-color-from-palette($primary);
      .swiper-container {
        .swiper-button-prev,
        .swiper-button-next {
          color: mat.m2-get-color-from-palette($primary, default-contrast);
        }
      }
    }
  }
  .swiper-container {
    .swiper-pagination-bullet-active {
      background-color: mat.m2-get-color-from-palette($primary);
    }
    .swiper-button-next,
    .swiper-button-prev {
      color: mat.m2-get-color-from-palette($primary, default-contrast);
      background-color: mat.m2-get-color-from-palette($primary, 0.5);
      border-radius: 50%;
      padding: 6px;
    }

    .bullets-custom-style-active {
      position: relative;
      &::after {
        content: '';
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        border: 2px solid mat.m2-get-color-from-palette($foreground, elevation, 0.4);
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
